<template>
  <view class="empty-order">
    <image class="empty-image" src="/static/empty-order.png" mode="aspectFit" />
    <text class="empty-text">暂无相关订单</text>
    <button class="go-shopping" @click="goShopping">去逛逛</button>
  </view>
</template>

<script setup>
const goShopping = () => {
  uni.switchTab({
    url: '/pages/product/list'
  })
}
</script>

<style lang="scss">
.empty-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
  
  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: $font-size-28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .go-shopping {
    width: 240rpx;
    height: 70rpx;
    line-height: 70rpx;
    background-color: $primary-color;
    color: $text-color-inverse;
    font-size: $font-size-28rpx;
    border-radius: 35rpx;
  }
}
</style>